<template>
  <view class="index">
    <view class="jtop">
      <view class="status_bar"><!-- 这里是状态栏 --></view>
      <view class="jtop_l" @tap="navigateBack"
        ><image src="../../static/img/ic_back.png"></image
      ></view>
      <!-- <view class="jtop_l" @tap="navigateBack">关闭</view> -->
      <view class="jtop_c">
        <view :class="[clockin ? 'jtop_c1' : 'jtop_c1 active']" @tap="awc()">
          上下班打卡
        </view>
        <view :class="[clockin ? 'jtop_c1 active' : 'jtop_c1']" @tap="awc()">
          外勤打卡
        </view>
      </view>
      <view class="jtop_r" @tap="to_add"
        ><image src="../../static/img/index/ic_reload time.png"></image
      ></view>
    </view>
    <view class="tophr"></view>

    <view class="cl">
      <view :class="[clockin ? 'cl_zc clockin' : 'cl_zc']">
        <image
          src="../../static/img/index/new/ic_building.png"
          :class="[clockin ? 'cl_img hide' : 'cl_img ']"
        ></image>

        <view :class="[clockin ? 'wc_b ' : 'wc_b hide']">
          <image src="../../static/img/index/new/dk.png" class="wc_b1"></image>
          <image
            src="../../static/img/jhead_portrait.png"
            class="wc_b2"
          ></image>
        </view>

        <view class="cl_t1">
          天府大厦A座
        </view>
        <view class="cl_t2">
          上海市静安区浦星公路800号
        </view>

        <view :class="[clockin ? 'cl_t4 ' : 'cl_t4 hide']">
          <input
            type="text"
            value=""
            placeholder="添加备注…"
            placeholder-style="color:#256AFF"
          />
        </view>

        <view class="yq">
          <view class="yq1">
            08:27
          </view>
          <view class="yq2">
            上班打卡
          </view>
        </view>

        <view class="cl_t3">
          打卡仅记录时间和位置
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/common/request.js';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      repeat_click: true,
      ashowpop: false,
      ashowpop_jrename: false,
      ashowpop_jdel: false,
      ashowpopT: false,
      bj: false,
      yd: false,

      clockin: false,
    };
  },

  methods: {
    // 跳转
    to_add() {
      uni.navigateTo({
        url: '../main/clock_work',
      });
    },

    awc() {
      this.clockin = !this.clockin;
    },

    navigateBack() {
      uni.navigateBack();
    },
  },
  computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
};
</script>

<style>
.cl {
  width: 690rpx;
  height: auto;
  display: block;
  float: left;
  margin: 30rpx;
  background: #ffffff;
  box-shadow: 0px 5rpx 15rpx rgba(0, 0, 0, 0.0980387);
  border-radius: 8rpx;
}
.cl_img {
  width: 64rpx;
  height: 64rpx;
  display: block;
  float: left;
  margin: 140rpx 313rpx 30rpx;
}
.cl_t1 {
  width: 90%;
  height: auto;
  display: block;
  float: left;
  margin: 0 5% 10rpx;
  font-size: 40rpx;
  line-height: 48rpx;
  text-align: center;
  color: #256aff;
}
.cl_t2 {
  width: 90%;
  height: auto;
  display: block;
  float: left;
  margin: 0 5% 238rpx;
  font-size: 28rpx;
  line-height: 36rpx;
  text-align: center;
  color: #256aff;
}
.cl_t3 {
  width: 90%;
  height: auto;
  display: block;
  float: left;
  margin: 0 5% 40rpx;
  font-size: 28rpx;
  line-height: 36rpx;
  text-align: center;
  color: #b5b5b5;
}
.yq {
  width: 260rpx;
  height: 260rpx;
  display: inline-block;
  float: none;
  border-radius: 100%;
  border: 20rpx solid #256aff;
  margin: 0 195rpx 204rpx;
}
.yq1 {
  width: 90%;
  height: auto;
  display: block;
  float: left;
  margin: 80rpx 5% 30rpx;
  font-size: 72rpx;
  line-height: 56rpx;
  text-align: center;
  color: #000000;
  font-weight: bold;
}
.yq2 {
  width: 90%;
  height: auto;
  display: block;
  float: left;
  margin: 0rpx 5% 30rpx;
  font-size: 28rpx;
  line-height: 36rpx;
  text-align: center;
  color: #000000;
}
.yq_cd {
  border-color: #ffaa20;
}

.cl_t4 {
  width: 90%;
  height: auto;
  display: block;
  float: left;
  margin: 0 5% 120rpx;
  font-size: 28rpx;
  line-height: 36rpx;
  text-align: center;
  color: #b5b5b5;
}
.cl_t4 input {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  color: #256aff;
}

.clockin .yq {
  border-color: #2db755;
}
.clockin .cl_t1,
.clockin .cl_t2 {
  color: #2db755;
}
.clockin .cl_t2 {
  margin-bottom: 82rpx;
}
.wc_b {
  width: 54rpx;
  height: 78rpx;
  display: block;
  float: left;
  margin: 122rpx 313rpx 26rpx;
  position: relative;
}
.wc_b1 {
  width: 54rpx;
  height: 78rpx;
  display: block;
  float: left;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
.wc_b2 {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
  position: absolute;
  z-index: 2;
  top: 3rpx;
  left: 3rpx;
  border-radius: 48rpx;
}

.tophr {
  width: 100%;
  height: 88rpx;
}
.uni-searchbar {
  box-shadow: none;
}

.index {
  background: #f2f2f2;
  width: 100%;
  height: auto;
}
.jtop {
  width: 100%;
  height: 88rpx;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: inset 0px -1px 0px #dddddd;
}
.jtop_l {
  width: auto;
  height: 88rpx;
  display: block;
  float: left;
  font-size: 32rpx;
  color: #000000;
  line-height: 88rpx;
  margin: 0 0 0 30rpx;
}
.jtop_l image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
  margin: 20rpx 0 20rpx 0;
}
.jtop_lt {
  margin: 0 0 0 10rpx;
}
.jtop_r {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: right;
  margin: 20rpx 20rpx 0 0;
}
.jtop_rl {
  margin: 20rpx 30rpx 0 0;
}
.jtop_r image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
}
.jtop_c {
  width: 70%;
  height: 48rpx;
  line-height: 48rpx;
  display: block;
  float: left;
  position: fixed;
  top: 20rpx;
  left: 15%;
  text-align: center;
  font-size: 36rpx;
  color: #000000;
}
.jtop_c image {
  width: 36rpx;
  height: 36rpx;
  display: inline-block;
  float: none;
  margin-bottom: -5rpx;
  margin-left: 5rpx;
}
.jtop_b {
  width: 100%;
  height: auto;
  background: #ffffff;
  position: fixed;
  top: 88rpx;
  left: 0;
  z-index: 1001;
}
.jtop_c1 {
  display: inline-block;
  margin: 0 20rpx;
  color: #b5b5b5;
}
.jtop_c1.active {
  color: #000000;
}
</style>
